@import 'tailwindcss';

@theme {
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;
  --color-primary-950: #172554;

  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-gray-950: #030712;

  --font-sans: 'Inter', 'system-ui', 'sans-serif';
}

@layer base {
  * {
    border-color: theme(colors.gray.200);
  }

  body {
    background-color: theme(colors.white);
    color: theme(colors.gray.900);
  }

  html {
    scroll-behavior: smooth;
  }
}

@layer components {
  .btn-primary {
    background-color: theme(colors.primary.600);
    color: theme(colors.white);
    padding: theme(spacing.2) theme(spacing.4);
    border-radius: theme(borderRadius.lg);
    font-weight: theme(fontWeight.medium);
    transition: colors 0.15s ease-in-out;
  }

  .btn-primary:hover {
    background-color: theme(colors.primary.700);
  }

  .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .btn-secondary {
    background-color: theme(colors.gray.100);
    color: theme(colors.gray.900);
    padding: theme(spacing.2) theme(spacing.4);
    border-radius: theme(borderRadius.lg);
    font-weight: theme(fontWeight.medium);
    transition: colors 0.15s ease-in-out;
  }

  .btn-secondary:hover {
    background-color: theme(colors.gray.200);
  }

  .btn-ghost {
    color: theme(colors.gray.700);
    padding: theme(spacing.2) theme(spacing.4);
    border-radius: theme(borderRadius.lg);
    font-weight: theme(fontWeight.medium);
    transition: colors 0.15s ease-in-out;
  }

  .btn-ghost:hover {
    background-color: theme(colors.gray.100);
  }

  .card {
    background-color: theme(colors.white);
    border-radius: theme(borderRadius.xl);
    border: 1px solid theme(colors.gray.200);
    box-shadow: theme(boxShadow.sm);
  }

  .input-field {
    width: 100%;
    padding: theme(spacing.2) theme(spacing.3);
    border: 1px solid theme(colors.gray.300);
    border-radius: theme(borderRadius.lg);
    outline: none;
  }

  .input-field:focus {
    ring: 2px solid theme(colors.primary.500);
    border-color: transparent;
  }

  .sidebar-item {
    display: flex;
    align-items: center;
    gap: theme(spacing.3);
    padding: theme(spacing.3) theme(spacing.4);
    color: theme(colors.gray.700);
    border-radius: theme(borderRadius.lg);
    transition: colors 0.15s ease-in-out;
    cursor: pointer;
  }

  .sidebar-item:hover {
    background-color: theme(colors.gray.100);
  }

  .sidebar-item.active {
    background-color: theme(colors.primary.50);
    color: theme(colors.primary.700);
    border-right: 2px solid theme(colors.primary.600);
  }
}

@layer utilities {
  .text-gradient {
    background: linear-gradient(to right, theme(colors.primary.600), theme(colors.blue.600));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }

  .glass {
    backdrop-filter: blur(4px);
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  .scroll-hidden {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .scroll-hidden::-webkit-scrollbar {
    display: none;
  }
}
